/*
 * @Author: your name
 * @Date: 2021-12-27 20:49:36
 * @LastEditTime: 2021-12-28 10:21:38
 * @LastEditors: LAPTOP-L472H14P
 * @Description: In User Settings Edit
 * @FilePath: \react-dnd-demo\src\Components\demo\DropTarget.js
 */
import React, { Component } from 'react'
import { DropTarget } from 'react-dnd'
const squareTarget = {
  drop(_, monitor, component) {
    const item = monitor.getItem()
    const items = component.state.items
    items.push(item)
    component.setState({ items })
  },
}

function collect(connect) {
  return {
    connectDropTarget: connect.dropTarget(),
  }
}
class DropTargetElement extends Component {
  state = {
    items: [],
  }
  render() {
    const { connectDropTarget,isOver } = this.props
    return connectDropTarget(
      <div
        style={{
          width: 500,
          backgroundColor: isOver
            ? 'rgba(150,150,150,0.2)'
            : 'rgba(150,150,150,0.5)',
          height: 500,
        }}
      >
        {this.state.items.map((item) => (
          <h5>{item.name}</h5>
        ))}
      </div>,
    )
  }
}
export default DropTarget('box', squareTarget, collect)(DropTargetElement)
